<script>
export default {

  name: "Pass",
  data() {
      return {
          ruleForm: {
              userId: window.sessionStorage.getItem('userId1'),
            password: '',
            password1: ''
          },
          rules: {
            password: [
                  { required: true, message: '请输入原密码', trigger: 'blur' },
              ],
            password1: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
                  { pattern: /^[a-zA-Z0-9_-]{6,12}$/, message: '密码必须是6-12位字母或数字', trigger: 'blur' }
              ]
          }
      }
  },
  methods: {
    getuserName() {
      },
    //重置
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    //提交
    submitForm(formName) {
      console.log('提交按钮点击')
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交表单
          this.$axios.post('/zhuche/updatePassword',this.ruleForm).then(res => {
            console.log(res.data)
            if(res.data == 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.resetForm('ruleForm')
            }else{
              this.$message({
                message: '密码错误',
                type: 'error'
              })
              //清空两个文本框
              this.resetForm('ruleForm')
            }
          })
        }
      })
    }
  },
  created() {
      this.getuserName()
  },
}
</script>

<template>
      <div class="pass">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width: 280px;" label-width="100px" class="demo-ruleForm">
              <el-form-item label="原密码" prop="password">
                  <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password1">
                  <el-input type="password1" v-model="ruleForm.password1" auto-complete="off"></el-input>
              </el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form>
      </div>
</template>

<style scoped>

</style>